<template>
  <div class="app">
    <div class="item" v-for="item of value" :key="item.title" @click="click(item)">
      <img :src="item.coverImgUrl" alt />
      <p>{{item.name}}</p>
    </div>
  </div>
</template>

<script>
import huayu from "../../models/huayu";
export default {
  data() {
    return {
      value: []
    };
  },
  async mounted() {
      var res = await huayu();
      this.value = res.data.playlists;
      console.log(this.value);
  },
  methods: {
      click(e){
          this.$router.push({name:'MusicDetail',query:{value:e}})
      }
  },
};
</script>

<style scoped>
img{
    width: 200px;
}
.item{
    width: 200px;
}
.app {
  width: max-content;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px 30px;
}
</style>